<template>
  <div class="notice">
    <h2>公告</h2>
    <div class="msg-box">
      <p
        v-for="(item, index) in msg"
        :key="index"
        class="text"
        :class="{'on': index == currentIndex}"
      >{{ item }}</p>
    </div>
    <router-link :to="{name:'Notice' }" class="link">查看更多</router-link>
  </div>
</template>
<script>
export default {
  name: 'Notice',
  props: {
    msg: {
      type: Array,
      required: true
    },
    noticeType: {
      type: String,
      default: 'official'
    },
    delay: {
      type: Number,
      default: 15000
    }
  },
  data() {
    return {
      currentIndex: 0
    };
  },
  created() {
    if (this.msg.length === 1) return;
    setInterval(() => {
      this.currentIndex++;
      this.currentIndex = this.currentIndex >= this.msg.length ? 0 : this.currentIndex;
    }, this.delay);
  },
  methods: {

  }
};
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
$height: 70px;
.notice{
	width: 100%;
	overflow: hidden;
	height: $height;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	padding: 0 25px 0 40px;
	box-sizing: border-box;
	h2{
		font-size: $fontSizeBig;
		color: #E7A13D;
	}
	.label{
		font-size: $fontSizeBase;
		padding: 3px 6px;
		border: 1px solid $borderColor;
		border-radius: 2px;
		margin: 0 8px 0 20px;
		color: $textColorBase;
		background-color: $appBg;
	}
	.msg-box{
		flex: 0 0 calc(100% - 200px);
		max-width: calc(100% - 200px);
		overflow: hidden;
		height: 44px;
		position: relative;
	}
	.more{
		flex: 0 0 60px;
	}
	.text{
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: absolute;
		left: 50%;
		margin: 0;
		padding: 14px 0;
		opacity: 0;
		transition: all 0.8s;
		color: $textColorDark;
		font-size: $fontSizeBase;
		&.on{
			opacity: 1;
			left: 0;
		}
	}
	.link{
		font-size: $fontSizeBase;
		color: $mainColor;
	}
}

</style>
